<template>
  <view class="normal-login-container">
    <view class="login-form-content">
			<text class="topTitle">注册账号</text>
			<view class="input-item flex align-center">
			  <uni-icons type="phone" ></uni-icons>
			  <input v-model="loginForm.mobile" class="input" type="text" placeholder="请输入手机号" maxlength="30" />
				<button class="getcode" @click="getCode">获取验证码</button>
			</view>
			<view class="input-item flex align-center">
				<uni-icons type="chatbubble" ></uni-icons>
			  <input v-model="loginForm.code"  class="input" placeholder="请输入验证码" maxlength="20" />
			</view>
			<view class="input-item flex align-center">
				<uni-icons type="locked" ></uni-icons>
			  <input v-model="loginForm.password" class="input" placeholder="请输入密码" maxlength="20" :password="showPassword" />
				<uni-icons :type="!showPassword ? 'eye' : 'eye-slash'" @click="changePassword" class="isShow-eye"></uni-icons>
			</view>
			<view class="input-item flex align-center">
				<uni-icons type="locked" ></uni-icons>
			  <input v-model="loginForm.password2" class="input" placeholder="确认密码" maxlength="20" :password="showPassword2" />
				<uni-icons :type="!showPassword2 ? 'eye' : 'eye-slash'" @click="changePassword2" class="isShow-eye" ></uni-icons>
			</view>
      <view class="action-btn">
        <button @click="handleRegister" class="login-btn cu-btn block bg-blue lg round">注册</button>
      </view>
    </view>
		<!-- <view class="register">
			<text @click="toLogin">账号密码登录</text>
			<text @click="toRegister">注册新账号</text>
		</view> -->
  </view>
</template>

<script>
	import { getCodeMobil,register } from '@/api/login'
  export default {
    data() {
      return {
        globalConfig: getApp().globalData.config,
				showPassword:true,
				showPassword2:true,
        loginForm: {
          mobile: "",
          password: "",
          code: "",
          uuid: ''
        }
      }
    },
    created() {
    },
    methods: {
      // 隐私协议
      handlePrivacy() {
        let site = this.globalConfig.appInfo.agreements[0]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
      // 用户协议
      handleUserAgrement() {
        let site = this.globalConfig.appInfo.agreements[1]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
			//验证码登录
			toLogin(){
				this.$tab.navigateBack(`/pages/login`)
			},
			//注册账号
			toRegister(){
				this.$tab.navigateTo(`/pages/register`)
			},
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			changePassword2: function() {
				this.showPassword2 = !this.showPassword2;
			},
      // 登录方法
      async handleRegister() {
				//this.$tab.reLaunch('/pages/work/index')
        if (this.loginForm.mobile === "") {
          this.$modal.msgError("请输入您的手机号")
        } else if (this.loginForm.password === "") {
          this.$modal.msgError("请输入您的密码")
        }else if (this.loginForm.password !== this.loginForm.password2) {
          this.$modal.msgError("两次密码不一致")
        } else if (this.loginForm.code === "" ) {
          this.$modal.msgError("请输入验证码")
        } else {
          this.$modal.loading("注册中，请耐心等待...")
          this.mobileRegister()
        }
      },
			
      // 密码注册
      mobileRegister() {
				register(this.loginForm.mobile,this.loginForm.password).then(res => {
				  this.$modal.closeLoading()
					this.$tab.reLaunch('/pages/login')
				}).catch(() => {
					this.$modal.msgError("注册失败")
				})
        // this.$store.dispatch('Login', this.loginForm).then(() => {
        //   this.$modal.closeLoading()
        //   this.loginSuccess()
        // }).catch(() => {
        // })
      },
      // 登录成功后，处理函数
      registerSuccess(result) {
        // 设置用户信息
				
      },
			// 获取手机验证码
			getCode() {
			  getCodeMobil().then(res => {
			    res = res.data;
					console.log(res)
					return
			  }).catch(() => {
					this.$modal.msgError("获取验证码失败")
				})
			},
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F8FAFC;
  }

  .normal-login-container {
    width: 100%;

    .logo-content {
      width: 100%;
      font-size: 21px;
      text-align: center;
      padding-top: 15%;
      image {
        border-radius: 4px;
      }
      .title {
        margin-left: 10px;
      }
    }

    .login-form-content {
      margin: 20px auto;
      margin-top: 20%;
      width: 80%;
			.topTitle{
				font-weight: 600;
				font-size: 30rpx;
				padding-left: 10rpx;
			}
      .input-item {
        margin: 40rpx auto;
        background-color: #ffffff;
        height: 100rpx;
        border-radius: 20rpx;
				box-shadow: 0px 2px 34px 5px rgba(156,193,220,0.25);
        .uni-icons {
          font-size: 38rpx;
          margin-left: 10px;
          color: #999 !important;
					padding-right: 10rpx;
        }
				.getcode{
					width: 300rpx;
					height: 100rpx;
					line-height: 100rpx;
					font-size: 24rpx;
					color: #fff;
					background: rgba(255,154,80,1);
				}
        .input {
          width: 100%;
          font-size: 14px;
          line-height: 20px;
          text-align: left;
          padding-left: 10px;
        }

      }

      .login-btn {
        margin-top: 60rpx;
        height: 100rpx;
				background: #FF9A50;
				border-radius: 20rpx;
      }
			
      .xieyi {
        color: #333;
        margin-top: 20px;
      }
    }

    .easyinput {
      width: 100%;
    }
  }
	.register{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 100rpx;
		text{
			color: #979797;
		}
	}
  .login-code-img {
    height: 45px;
  }
</style>
